import { useSyncExternalStore } from 'react';
import { todosStore } from './24-myStore.jsx';
// 当可能的时候，我们推荐通过 useState 和 useReducer 使用内建的 React state 代替。
// 如果你需要去集成已有的非 React 代码，useSyncExternalStore API 是很有用的。
export default function TodosApp() {
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
  return (
    <>
      <button onClick={() => todosStore.addTodo()}>Add todo</button>
      <hr />
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}
